<div id="metrics-sentiment" class="row-fluid white-row metrics-block" style="height: 250px;">
    <div class="metrics-block-number">
        <h5>OVERALL SENTIMENT
            <a class="popover-question-container" rel="tooltip" data-title="The gauge provides a visual reference of overall sentiment based on the current filters.  The bar below shows the specific percentages for positive, neutral and negative sentiment. Keep in mind, mentions with unknown sentiment are excluded from this metric." data-original-title="">
                <i class="icon-question"></i>
            </a>
        </h5>
        <div class="mozaic-widget sentiment-analytics widget-overall_sentiment" data-widget="overall_sentiment" >
            <div class="mozaic-widget widget-sentiment_meter_reports_state_manager" data-widget="sentiment_meter_reports_state_manager" >
                <div class="mozaic-widget widget-sentiment_meter" data-widget="sentiment_meter" >
                    <div class="sentiment-graph setiment-report-meter">
                        <div class="sentiment-meter-gauge">
                            <table class="sentiment-data" style="display: none">
                                <tr> 
                                    <th>Negative</th> 
                                    <td>12%</td> 
                                </tr> 
                                <tr> 
                                    <th>Neutral</th> 
                                    <td>60%</td> 
                                </tr> 
                                <tr> 
                                    <th>Positive</th> 
                                    <td>18%</td> 
                                </tr> 
                                <tr> 
                                    <th>Undefined</th> 
                                    <td>10%</td> 
                                </tr>
                                <tr>
                                    <th>Irrelevant</th> 
                                    <td>10%</td> 
                                </tr>
                            </table>
                            <div id="sentiment-metter" style="height: 130px"></div>
                        </div>
                        <!--<div class="sentiment-meter-numbers">
                            <span class="sentiment-meter-gauge-sentiment positive-colored">moderately</span>
                            <span class="sentiment-meter-gauge-dominant-percentage positive-colored">positive</span>
                        </div> -->
                    </div>
                    <ul class="sentiment-graph-details">
                        <li class="sentiment-graph-details-positive" style="width:33%">
                            <div class="sentiment-graph-details-left">
                                <span class="sentiment-graph-details-percentage positive-colored"></span>
                                <span class="sentiment-graph-details-sentiment">positive <i>mentions</i></span>
                            </div>
                            <div class="sentiment-graph-details-bar-holder">
                                <div class="sentiment-graph-details-bar positive-bar" style="width:0%"></div>
                            </div>
                        </li>
                        <li class="sentiment-graph-details-neutral" style="width:33%">
                            <div class="sentiment-graph-details-left">
                                <span class="sentiment-graph-details-percentage neutral-colored"></span>
                                <span class="sentiment-graph-details-sentiment">neutral <i>mentions</i></span>
                            </div>
                            <div class="sentiment-graph-details-bar-holder">
                                <div class="sentiment-graph-details-bar neutral-bar" style="width:0%"></div>
                            </div>
                        </li>
                        <li class="sentiment-graph-details-negative" style="width:33%">
                            <div class="sentiment-graph-details-left">
                                <span class="sentiment-graph-details-percentage negative-colored"></span>
                                <span class="sentiment-graph-details-sentiment">negative <i>mentions</i></span>
                            </div>
                            <div class="sentiment-graph-details-bar-holder">
                                <div class="sentiment-graph-details-bar negative-bar" style="width:0%"></div>
                            </div>
                        </li>
                        <li class="sentiment-graph-details-irrelevant" style="width:0%">
                            <div class="sentiment-graph-details-bar-holder">
                                <div class="sentiment-graph-details-bar irrelevant" style="width:0%"></div>
                            </div>
                        </li>
                        <li class="sentiment-graph-details-undefined" style="width:0%">
                            <div class="sentiment-graph-details-bar-holder">
                                <div class="sentiment-graph-details-bar undefined-bar" style="width:0%"></div>
                            </div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="metrics-block-graph sentiment-block-graph" style="height: 100%;">
        <h5 class="sentiment-title">
            <a class="sentiment-trend selected">SENTIMENT TREND</a>
            <a class="sentiment-trend">SENTIMENT BY PERCENT</a>
        </h5>
        <div id="hourly-sentoment-widget" class="mozaic-widget widget-hourly_filter" data-widget="hourly_filter" >
            <ul class="hourly-filter-wrapper">
                <li class="selected action-color-active">Daily</li>
                <li class="not_selected action-color-active">Weekly</li>
                <li class="not_selected action-color-active">Monthly</li>
            </ul>
        </div>
        <div class="mozaic-widget metrics-state-manager widget-metrics_state_manager" data-widget="metrics_state_manager" style="height: 90%;">
            <div id="sentiment-widget" class="mozaic-widget sentiment-graph widget-time_series" data-widget="time_series" style="height: 100%">
                <div class="highcharts-container" id="sentiment-trend" style="position: relative; overflow: hidden; width: 100%; height: 100%; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">

                </div>
            </div>
        </div>
    </div>
    <div class="loading" style="left: 46%;top: 49%;position: absolute;">
        <div class="duo duo1">
            <div class="dot dot-a"></div>
            <div class="dot dot-b"></div>
        </div>
        <div class="duo duo2">
            <div class="dot dot-a"></div>
            <div class="dot dot-b"></div>
        </div>
    </div>
</div>